<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Social Media icons</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

	<style>
		*{
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		body{
			display: flex;
			justify-content: center;
			align-items: center;
			min-height: 100vh;
			background: #f5f5f5;
		}
		ul{
			position: relative;
			display: flex;
		}
		ul li{
			position: relative;
			list-style: none;
		}
		ul li a{
			position: relative;
			width: 80px;
			height: 80px;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #fff;
			margin: 0 10px;
			text-decoration: none;
			font-size: 30px;
			border-radius: 50%;
			color: #e2e2e2;
			box-shadow: inset -1px -1px 2px rgba(0,0,0,0.2), 2px 2px 5px rgba(0,0,0,0.2);
			transition: 0.5s;
		} 
		ul li a:hover{
			color: #999;
			transform: translateY(-20px);
			box-shadow: inset -1px -1px 2px rgba(0,0,0,0.2),  2px 24px 10px rgba(0,0,0,0.1);
		}
		ul li a .fa{
			color: #fff;
			position: relative;
			z-index: 1;
		}
		ul li a:before{
			content: '';
			position: absolute;
			top: 10px;
			left: 10px;
			right: 10px;
			bottom: 10px;
			border-radius: 50%;
			border: 2px solid rgba(0,0,0,0.1);
		}
		ul li:nth-child(1) a:before{
			background: #1da1f2;

		}
		ul li:nth-child(2) a:before{
			background: #25d366;
		}
		ul li:nth-child(3) a:before{
			background: #c32aa3;
		}
		ul li:nth-child(4) a:before{
			background: #ea4c89;
		}
	</style>
</head>
<body>
	<ul>
		<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
		<li><a href="#"><i class="fa fa-whatsapp" aria-hidden="true"></i></a></li>
		<li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
		<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li> 
	</ul>

</body>
</html>